<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>小说评论</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="user_id" placeholder="请输入用户ID"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="nickname" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="title" placeholder="请输入小说标题"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'210':''"
                        label="用户信息">
                    <template slot-scope="scope">
                        <div class="user_list">
                            <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30" class="img">
                            <div>
                                <p>{{scope.row.userInfo.id}}</p>
                                <p>{{scope.row.userInfo.nickname}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'150':''"
                        prop="images"
                        label="小说信息">
                    <template slot-scope="scope">
                        <img :src="scope.row.coverpic" alt="" width="30" height="30" class="imgs">
                        {{scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'100':''"
                        prop="created_at"
                        label="评论时间">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="created_at"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" plain @click="lookClick(scope.row)">修改</el-button>
                        <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="changeSize"
                    @current-change="changeCurrent"
                    :current-page="params.pagenum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="params.pagesize"
                    :layout="this.$store.state.paginationLayout"
                    :total="params.totals">
            </el-pagination>
        </el-card>
        <el-dialog
                title="修改"
                :visible.sync="dialogVisible"
                :width="this.$store.state.dialogWidth">
            <el-form ref="form" label-width="80px" size="small">
                <el-form-item label="是否显示">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option label="显示" value="1"></el-option>
                        <el-option label="隐藏" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评论内容">
                    <el-input
                            type="textarea"
                            autosize
                            v-model="form.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">关闭</el-button>
                  <el-button type="primary" @click="dialogAffirmEdit" size="small">确 定</el-button>
    </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Novel_Comments",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0
                },
                dialogVisible: false,
                tableData: [],
                content: '',
                form: {
                    content: '',
                    status: '',
                },
                nickname: '',
                user_id: '',
                title: '',
                searchForm: {
                    start_time: '',
                    end_time: '',
                },
                id: '',
            }
        },
        created() {
            this.getList()
        },
        watch: {
            nickname(e) {
                this.params.pagenum = 1;
                this.getList()
            },
            user_id(e) {
                this.params.pagenum = 1;
                this.getList()
            },
            title(e) {
                this.params.pagenum = 1;
                this.getList()
            }
        },
        methods: {
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    nickname: this.nickname,
                    user_id: this.user_id,
                    title: this.title,
                    start_time: this.searchForm.start_time,
                    end_time: this.searchForm.end_time,
                };
                this.$axios.post("admin/novel_comments/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList()
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.del('admin/novel_comments/' + id, '').then((res) => {
                        this.$message.success('删除成功!');
                        if (Math.floor((parseInt(this.params.totals) - 1) / this.params.pagesize) == (parseInt(this.params.totals) - 1) / this.params.pagesize && ((Math.ceil((parseInt(this.params.total) / parseInt(this.params.pagesize)))) - parseInt(this.params.pagenum)) < 1) {
                            this.params.pagenum = this.params.pagenum - 1
                        }
                        this.getList();
                    });
                }).catch(() => {

                });
            },
            lookClick(row) {
                this.id = row.id;
                this.form.content = row.content;
                this.form.status = row.status.toString();
                this.dialogVisible = true;
            },
            dialogAffirmEdit() {
                this.$axios.put('admin/novel_comments/' + this.id, this.form).then((res) => {
                    this.$message.success('修改成功');
                    this.dialogVisible = false;
                    this.getList();
                });
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            }
        }
    }
</script>

<style scoped>
    .user_list {
        display: flex;
        align-items: center;
    }

    .user_list .img {
        margin-right: 5px;
    }

    .imgs {
        vertical-align: middle;
    }
</style>